星尘

8. Ajax获取推荐数据

发表于 更新于 分类于

使用Redux-thunk

使action返回的是一个函数，而不再是一个对象

1
cnpm install redux-thunk

使用axios发送请求

1
cnpm install axios

获取焦点的时候发送请求获取数据，并将获取的数据赋予state中的list元素
common/header/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const mapDispathToProps = (dispatch) => {
	return {
		// 获得焦点，派发dispatch函数
		SearchFocus(){
			// 获取异步数据
			dispatch(actionCreator.getList())
			dispatch(actionCreator.searchFocus())
		},
		
		// 失去焦点，派发dispatch函数
		SearchBlur(){
			dispatch(actionCreator.searchBlur())
		}
	}
}

common/header/store/actionCreator.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export const getList = () => {
	// 使用redux-thunk之后，action不光可以返回一个对象
	//还可以返回一个函数。同时传入一个dispatch
	return (dispatch) => {
		axios.get('/api/headerList.json').then((res) => {
			// 获取到接口返回的数据
			const data = res.data;
			
			// 派发dispatch
			dispatch(changeList(data.data))
		}).catch(() => {
			console.log('Error')
		})
	}
};

const changeList = (data) => ({
	type: constants.CHANGE_LIST,
	// 因为State中的list数组是一个 immutable 对象
	// 所以我们要将传入的值也变为一个immutable对象
	// 这样才能修改State中list的值
	data: fromJS(data) 
})

common/header/store/reducer.js

1
2
3
4
5
6
7
8
9
10
const defaultState = fromJS({
	'showSearchArea': '',
	'list': []
});
...
...
// 获取热门搜索的值
if (action.type === constants.CHANGE_LIST){
    return state.set('list', action.data)
}

注意

因为我们使用到了immutable，所以

1
2
3
4
const defaultState = fromJS({
	'showSearchArea': '',
	'list': []
});

中的showSearchArea和list也是一个immutable对象，我们在使用

1
2
3
if (action.type === constants.CHANGE_LIST){
		return state.set('list', action.data)
	}

修改list的值的时候，传入的action.data也应该是一个immutable对象，所以在actionCreator中创建action的时候要对action中的数据进行immutable转换

1
2
3
4
5
6
7
const changeList = (data) => ({
	type: constants.CHANGE_LIST,
	// 因为State中的list数组是一个 immutable 对象
	//所以我们要将传入的值也变为一个immutable对象
	// 这样才能修改State中list的值
	data: fromJS(data) 
})

代码地址